<script setup>
import { onMounted, ref } from 'vue'
import { cancelPropertyService, getPropertyServiceList } from '@/api/me'

const propertyServiceList = ref([])
const listTotal = ref(0)
const pageNo = ref(1)

async function onGetPropertyServiceList() {
  try {
    await uni.showLoading({ title: '请稍后' })
    const { result: { records, total } } = await getPropertyServiceList({ pageNo: pageNo.value, pageSize: 10 })
    uni.hideLoading()
    propertyServiceList.value = records
    listTotal.value = total
  }
  catch (e) {
    await uni.showToast({ icon: 'none', title: '获取物业服务失败' })
  }
}

function onPageNumChange(e) {
  pageNo.value = e.current
}

function goPropertyDetail(propertyId) {
  if (propertyId)
    uni.navigateTo({ url: `/pages/me/view/property-detail?propertyId=${propertyId}` })
  else
    uni.navigateTo({ url: '/pages/me/view/property-detail' })
}

const confirmVisible = ref(false)
const currentDeleteId = ref(null)
function onDelete(id) {
  currentDeleteId.value = id
  confirmVisible.value = true
}
async function onConfirm() {
  try {
    await uni.showLoading({ title: '请稍后' })
    const { success, message } = await cancelPropertyService(currentDeleteId.value)
    uni.hideLoading()

    if (!success)
      throw new Error(message)

    await uni.showToast({ icon: 'success', title: '取消成功' })
    await onGetPropertyServiceList()
  }
  catch (e) {
    await uni.showToast({ icon: 'none', title: e.message, duration: 2000 })
  }
}

onMounted(() => {
  onGetPropertyServiceList()
})
</script>

<template>
  <view class="bg-[#F5F5F5] pb-safe min-h-safe">
    <nut-navbar title="物业服务" custom-color="#000" left-show placeholder fixed />
    <main class="mt-1.5">
      <view class="mb-1.5 bg-white text-right relative h-95">
        <image src="../../../static/image/me/add-property-bg.jpg" class="h-full w-full" />
        <view class="absolute right-26 top-20">
          <nut-config-provider :theme-vars="{ buttonBorderRadius: '8px' }">
            <nut-button plain type="primary" size="small" @click="goPropertyDetail(null)">
              申请物业服务
            </nut-button>
          </nut-config-provider>
        </view>
      </view>
      <view v-if="propertyServiceList.length === 0" class="bg-white">
        <nut-empty description="暂无物业服务记录">
          <template #image>
            <view class="center h-full">
              <image class="block !h-230 !w-180" src="../../../static/image/me/empty.jpg" />
            </view>
          </template>
        </nut-empty>
      </view>
      <view v-else class="bg-white">
        <uni-table stripe border>
          <uni-tr>
            <uni-th width="180" align="center">
              <view class="text-black">
                服务说明
              </view>
            </uni-th>
            <uni-th width="120" align="center">
              <view class="text-black">
                申请时间
              </view>
            </uni-th>
            <uni-th width="60" align="center">
              <view class="text-black">
                操作
              </view>
            </uni-th>
          </uni-tr>
          <!-- 表格数据行 -->
          <uni-tr v-for="item in propertyServiceList" :key="item.id">
            <uni-td align="center" class="truncate max-w-[180px]">
              <view class="text-[#3E7CDE] truncate underline underline-offset-4 max-w-[180px]" @click="goPropertyDetail(item.id)">
                {{ item.content }}
              </view>
            </uni-td>
            <uni-td align="center">
              {{ item.createTime.split(' ')[0] }}
            </uni-td>
            <uni-td align="center">
              <view class="flex justify-center items-center">
                <view class="i-uiw:delete text-[#D81E06]" @click="onDelete(item.id)" />
              </view>
            </uni-td>
          </uni-tr>
        </uni-table>
        <view class="px-2 py-1">
          <uni-pagination :total="total" :current="pageNo" :page-size="10" @change="onPageNumChange" />
        </view>
      </view>
    </main>
    <nut-dialog v-model:visible="confirmVisible" content="确认取消物业服务吗?" @ok="onConfirm" />
  </view>
</template>
